<template>
    <el-tag class="ml-2" type="primary" style="margin-right: 20px">
            <span style="display: flex; align-items: center">
                <img src="@/assets/tiku/time.png" alt=""/>&nbsp;
                {{proxy.$filters.timeFormat(_startTime)}}--{{endTime}}
            </span>
    </el-tag>
</template>

<script>
    import {toRefs,onMounted,onBeforeUnmount,ref} from 'vue'
    import {getCurrentInstance} from 'vue'

    export default {
        name: "index",
        props: {
            startTime: {
                type: Number,
                default: 0
            },
            endTime: {
                type: Number,
                default: 0
            },
        },
        setup(props,{emit}) {
            const {proxy} = getCurrentInstance();

            // let {startTime,endTime} = toRefs(props);

            let _startTime = ref(props.startTime);
            let endTime = ref(props.endTime);

            let useTime = (startTime, endTime) => {
                setInterval(() => {
                    _startTime.value++;
                    // console.log('startTime',_startTime.value);
                    if(_startTime == endTime){
                        emit('ended')
                    }
                }, 1000)
            }

            onBeforeUnmount(() =>{
                console.log('销毁------计时器')
            })

            onMounted(()=>{
                useTime(_startTime,endTime)
            })

            return {
                proxy,
                _startTime
            }
        }
    }
</script>

<style scoped>

</style>
